<script lang="ts" setup>
import { ref, reactive, markRaw } from "vue";
import ActiveA from "./activeA.vue";
import ActiveB from "./activeB.vue";
// 什么是动态组件 就是：让多个组件使用同一个挂载点，并动态切换，这就是动态组件。
// 在挂载点使用component标签，然后使用v-bind:is=”组件”
type tabType = {
  name: string;
  tabComp: any;
};
const tabData = reactive<tabType[]>([
  {
    name: "A组件",
    // proxy会代理reactive中的所有内容
    // 无需对组件进行proxy代理
    // 必须使用markRaw跳过对组件的代理，否则vue会给警告
    tabComp: markRaw(ActiveA),
  },
  {
    name: "B组件",
    tabComp: markRaw(ActiveB),
  },
]);

type Comp = Pick<tabType, "tabComp">;
let currentTab = reactive<Comp>({
  tabComp: tabData[0].tabComp,
});

const switchTab = (tab: tabType) => {
  currentTab.tabComp = tab.tabComp;
};
</script>
<template>
  <div class="wrap">
    <div
      class="tabs-content"
      @click="switchTab(tab)"
      v-for="(tab, index) in tabData"
      :key="index"
    >
      {{ tab.name }}
    </div>
  </div>

  <component :is="currentTab.tabComp"></component>
</template>
<style scoped>
.wrap {
  display: flex;
}
.tabs-content {
  border: 1px solid red;
}
</style>
<!-- 
    1.在Vue2 的时候is 是通过组件名称切换的 在Vue3 setup 是通过组件实例切换的

2.如果你把组件实例放到Reactive Vue会给你一个警告runtime-core.esm-bundler.js:38 [Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. 
Component that was made reactive: 
这是因为reactive 会进行proxy 代理 而我们组件代理之后毫无用处 节省性能开销 推荐我们使用shallowRef 或者  markRaw 跳过proxy 代理
 
 <template>
  <div>
    <component :is="A"></component>
  </div>
</template>
 
<script>
import A from './activeA';
export default {
  name: 'paysuccess',
  data() {
    return {
      
    }
  },
  components: {
    A
  },
}
</script> -->
